<template>
    <div class="rank">
        <van-tabs v-model:active="active" @click-tab="onClickTab">
            <van-tab v-for="item in rankKind.list" :title="item.titile">
                <ul>
                    <li v-for="(item, index) in rankList.list">
                        <div class="rankTab">
                            <h4 :class="index == 0 ? 'first' : index == 1 ? 'second' : index == 2 ? 'third' : 'normal'">{{ index + 1 }}</h4>
                            <a @click="pathGo(item)" href="javascript:;">{{ item.title }}</a>
                        </div>
                        <span>浏览量: {{ item.clicks != null ? item.clicks : 0 }}</span>
                    </li>
                </ul></van-tab
            >
        </van-tabs>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { hotComment } from "@/request";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
let store = useStore();
const router = useRouter();
let active = ref(0);
let rankList = reactive({
    list: [],
});
let rankKind = reactive({
    list: [
        { id: 0, titile: "冲浪榜" },
        { id: 1, titile: "本地榜" },
        { id: 2, titile: "军事榜" },
        { id: 3, titile: "娱乐榜" },
        { id: 4, titile: "亲子榜" },
        { id: 5, titile: "体育榜" },
    ],
});
const onClickTab = () => {
    console.log(active.value);
    store.commit("myRoute/changeHotList", active.value);
    hotComment({ id: active.value }).then((data) => {
        rankList.list = data.rows;
        // console.log(data);
    });
};
onMounted(() => {
    active.value = store.state.myRoute.hotRank;
    hotComment({ id: active.value }).then((data) => {
        rankList.list = data.rows;
        // console.log(data);
    });
});
const pathGo = (x) => {
    // console.log(x, "dsa");
    router.push({ path: "/newsDetail", query: { id: x.id } });
};
</script>
<style lang="scss">
@import "../../../static/style/variable.scss";
.rank {
    padding: 0 7px;
    .van-tabs .van-tabs__line {
        background-color: #c2c2c2 !important;
    }
    ul {
        li {
            height: 45px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            width: 100%;
            border-bottom: 1px solid #ccc;
            justify-content: space-between;
            .rankTab {
                display: flex;
                align-items: center;
                width: 7rem;
            }
            h4 {
                font-size: 18px;
                margin: 0 0.0533rem;

                font-weight: 600;
                &.first {
                    color: #f15a24;
                }
                &.second {
                    color: #f18c00;
                }
                &.third {
                    color: #e6a851;
                }
                &.normal {
                    color: #999;
                }
            }
            a {
                font-size: 0.4267rem;
                margin-left: 0.1067rem;
                padding-top: 0.0533rem;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            span {
                font-size: 0.32rem;
                margin-right: 0.2667rem;
                padding-top: 0.16rem;
            }
        }
    }
}
</style>
